<template>
  <div>
    <div class="html_er">
      <div class="header">
        <div class="top">
          <div>
            <i @click="gohome" class="iconfont icon-lt"></i>
          </div>
          <p>
            <i class="iconfont icon-sandian"></i>
            <span></span>
            <i class="iconfont icon-xiaochengxu-guanbi1"></i>
          </p>
        </div>
      </div>
      <div class="plays">
        <img
          class="img_hi"
          src="../../../static/img/图片 2@1x (1).png"
          alt=""
        />
      </div>
      <div class="chitchat" ref="chitchat">
        <div class="content" v-for="(item, index) in talkData" :key="index">




          <div class="service" v-if="item.type === '0'">
            <img class="headPhoto" src="../../../static/img/图片 Copy@1x.png" />
            <div class="con">
              <span></span>
              {{ item.talkCon }}
            </div>
          </div>






          <div class="user" v-if="item.type === '1'">
            <img class="headPhoto" src="../../../static/img/图片 Copy@1x.png" />
            <div class="con">
              <span></span>
              {{ item.talkCon }}
            </div>
          </div>
          <div class="img service" v-if="item.type == '3'">
            <img class="headPhoto" src="../../../static/img/图片 Copy@1x.png" />
            <div class="con" @click="goStory(item)">
              <img :src="item.bookImg" />
              <p>{{ item.bookName }}</p>
              <div class="tag">
                <a v-for="(item1, index1) in item.tab" :key="index1">{{
                  item1
                }}</a>
              </div>
            </div>
          </div>
          <div class="img service" v-if="item.type == '4'">
            <img class="headPhoto" src="../../../static/img/图片 Copy@1x.png" />
            <div class="con" @click="goStory(item)">
              <img :src="item.bookImg" />
              <p>{{ item.bookName }}</p>
              <div class="tag">
                <a v-for="(item1, index1) in item.tab" :key="index1">{{
                  item1
                }}</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="botton_yu">
        <div class="wrap_footerRow">
          <span class="iconfont icon-jianpan"></span>
        </div>
        <div class="wrap_footerRow">
          <input v-model="value" class="wrap_footerRowInput" type="text" @input='word' />
          <button @click="send">发送</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import * as api from "../api/home";
import sensitiveWord from "../js/sensitiveWord";
export default {
  name: "",
  data() {
    return {
      msg: "测试",
      value: "",
      talkData: [],
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    let treeData = this.$store.state.order.treeData;
    this.talkData = treeData;
    this.$nextTick(function () {
      let scrollTop = this.$store.state.order.scrollTop;
      this.$refs.chitchat.scrollTop = scrollTop;
    });
  },
  updated() {
    this.talkData.forEach((item, index) => {
      if (item.type === "3") {
        api
          .findBook({ bookId: `${item.talkCon}` })
          .then((res) => {
            item = res.data;
            item.type = 3;
            item.tab = item.tab.split(",");
            this.$store.commit("order/replaceTreeData", item);
            let treeData = this.$store.state.order.treeData;
            this.talkData = treeData;
          })
          .catch((err) => {
            console.log("失败", err);
          });
      }
      if (item.type === "4") {
        api
          .bookSort({ interest: `${item.talkCon}` })
          .then((res) => {
            item = res.data;
            item.type = 3;
            item.tab = item.tab.split(",");
            this.$store.commit("order/replaceTreeData", item);
            let treeData = this.$store.state.order.treeData;
            this.talkData = treeData;
          })
          .catch((err) => {
            console.log("失败", err);
          });
      }
    });
    if (this.$refs.chitchat.clientHeight < this.$refs.chitchat.scrollHeight) {
      this.$nextTick(function () {
        this.$refs.chitchat.scrollTop =
          this.$refs.chitchat.scrollHeight - this.$refs.chitchat.clientHeight;
        this.$store.commit("order/scrollTop", this.$refs.chitchat.scrollTop);
      });
    }
  },
  // Vue方法定义
  methods: {
    gohome() {
      this.$router.push("/home");
    },
    send() {
      let obj = {
        talkCon: this.value,
        type: "1",
      };
      this.$store.dispatch("order/addTreeData", obj);
      this.value = "";
    },
    goStory(item) {
      this.$router.push({
        path: `/story/${item.bookId}`,
      });
    },
    word() {
      sensitiveWord.forEach((item, index) => {
        if (this.value.indexOf(item) !== -1) {
          this.value = this.value.replace(`${item}`, "*");
        }
      });
    },
  },
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
@import url("../../assets/font/iconfont.css");
.html_er {
  width: 100%;
  /* height:calc(100vh - 70px); */
  height: 100vh;
  /* overflow-y: auto; */
  overflow: hidden;
  background: #f5c92c;

  position: absolute;
  top: 0;
  z-index: 90;
}
.header {
  width: 100vw;
  height: 428px;
  margin-top: 50px;
}
/* 头部的顶部 */
.header .top {
  width: 100vw;
  height: 4px;
  display: flex;
  justify-content: space-between;
  padding: 0 14px;
  align-items: center;
  vertical-align: middle;
}
.header .top .icon-lt {
  font-size: 24px;
  color: white;
  font-weight: bold;
}
.header .top p {
  width: 87px;
  height: 32px;
  line-height: 20px;
  border-radius: 30px;
  background-color: #f5c92c;
  text-align: center;
  border: 1px solid rgba(232, 232, 232, 100);
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.header .top p span {
  border-right: 2px solid #e8e8e8;
  display: block;
  width: 1px;
  height: 18px;
}
.header .top p .icon-sandian {
  color: white;
  font-size: 20px;
  font-weight: bold;
}
.header .top p .icon-xiaochengxu-guanbi1 {
  color: white;
  font-size: 15px;
  font-weight: bold;
  vertical-align: middle;
}
.top_out {
  width: 380px;
  height: 50px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.p_rigth {
  width: 87px;
  height: 32px;
  border-radius: 20px;
  border: 1px solid white;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.chitchat {
  width: 90%;
  margin: 0 auto;
  overflow-y: auto;
  height: calc(100vh - 130px);
  position: absolute;
  top: 68px;
  left: calc(calc(100% - 90%) / 2);
  z-index: 10;
}
.img_hi {
  width: 355px;
  height: 304px;
  animation: mymove 700ms;
}
@keyframes mymove {
  0% {
    transform: scale(0.9) rotate(-5deg);
  }
  15% {
    transform: scale(1) rotate(5deg);
  }
  30% {
    transform: scale(1.1) rotate(-5deg);
  }
  45% {
    transform: scale(1.1) rotate(5deg);
  }
  60% {
    transform: scale(1.1) rotate(-5deg);
  }
  75% {
    transform: scale(1.1) rotate(5deg);
  }
  90% {
    transform: scale(1.1) rotate(-5deg);
  }
  100% {
    transform: scale(1.1) rotate(5deg);
  }
}
.plays {
  width: 355px;
  height: 304px;
  margin: 0 auto;
  margin-top: -290px;
}
.botton_yu {
  width: 100%;
  height: 60px;
  background: white;
  border-radius: 30px 30px 0 0;
  position: absolute;
  bottom: -1px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.voice {
  width: 324px;
  height: 30px;
  background: #f4f4f4;
  border: none;
  outline: none;
  text-align: center;
}
.icon-jianpan {
  font-size: 24px;
  color: #c1c1c1;
}
.chitchat .content {
  overflow: hidden;
}

.service {
  float: left;
  margin-top: 20px;
  overflow: hidden;
}
.service .headPhoto {
  float: left;
  margin-right: 20px;
}
.service .con {
  max-width: 70vw;
  float: left;
  background: white;
  border-radius: 5px;
  padding: 8px;
  position: relative;
}
.service div span {
  position: absolute;
  left: -20px;
  top: 0px;
  display: block;
  border-width: 10px;
  border-style: solid;
  border-color: transparent white transparent transparent;
  transform: translateY(50%);
}
.service .tag {
  padding: 8px 0;
}
.service .con p {
  width: 185px;
  font-weight: bold;
  font-size: 17px;
}
.service .tag a {
  padding: 4px 10px;
  border-radius: 15px;
  color: white;
  margin-right: 10px;
}
.service .tag a:nth-of-type(1) {
  background: #ffc700;
}
.service .tag a:nth-of-type(2) {
  background: #09d0b2;
}
.img .headPhoto {
  margin-right: 10px;
}
.img .con {
  border-radius: 15px;
}
.user {
  float: right;
  margin-top: 20px;
  overflow: hidden;
}
.user .headPhoto {
  float: right;
  margin-left: 20px;
}
.user div {
  max-width: 70vw;
  float: right;
  background: #0aceb0;
  border-radius: 5px;
  padding: 8px;
  position: relative;
  color: white;
}
.user div span {
  position: absolute;
  right: -20px;
  top: 0px;
  display: block;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent transparent #0aceb0;
  transform: translateY(50%);
}

.wrap_footerRow:nth-child(1) {
  flex: 0.2;
  text-align: center;
  line-height: 50px;
}
.wrap_footerRow:nth-child(1) span {
  flex: 0.2;
  text-align: center;
  line-height: 50px;
  font-size: 27px;
}

.wrap_footerRow:nth-child(2) {
  flex: 0.8;
  line-height: 50px;
}

/* input样式 */
.wrap_footerRowInput {
  display: inline-block;
  width: 263px;
  height: 30px;
  background-color: #f4f4f4;
  text-align: left;
  line-height: 30px;
  font-size: 15px;
  border: none;
  outline: none;
}
/* 改变input字体 */
.wrap_footerRowInput::-webkit-input-placeholder {
  font-size: 15px;
  color: #0c1212;
  font-weight: bold;
}
.wrap_footerRow button {
  border: none;
  background: #00b396;
  padding: 5px;
  border-radius: 5px;
  color: white;
  margin-left: 8px;
}
</style>